<template>
  <div>
    <!-- 
      ref是添加产品需要绑定的
      :reules="reules": 是验证表单必须填写的 对应的还有model="addform"
      还有一个必填忘记了

      form 表单中只有一个输入框，在输入框中按下回车就是提交该表单，且会刷新页面。阻止这一默认行为，可以 在 标签上添加 @submit.native.prevent 

      @ 后面的是绑定的点击事件, 
      .native 表示对一个组件绑定系统原生事件, 变成本地的属性
      .prevent 表示按下按钮后, 可以让他默认刷新
      label-width: 是标签宽度, 是组件里面带有的相当于课选填
     -->

     <el-form 
     :inline="true"
     :model="form">
        <el-form-item>
          <el-input 
          v-model="form.name"
          placeholder="请输入产品名称"
          class="input-with-select"
          >
            <el-button
            slot="append"
            icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-form-item>
     </el-form>
     <el-divider content-position="left">产品列表</el-divider>

     <!-- 表格 -->
     <el-table :data="makeupData">
      <el-table-column 
      label="封面图片" width="150px" align="center">
          <template slot-scope="scope">
              <img :src="scope.row.pic1" width="150px">
              <img :src="scope.row.pic2" width="50px">
          </template>
      </el-table-column>
      <el-table-column label="产品名称" prop="name" width="250px" align="center">
      </el-table-column>
      <el-table-column label="产品英文名称" prop="detail" width="250px" align="center">
      </el-table-column>
      <el-table-column label="产品阴影色号" prop="title" width="150px" align="center">
      </el-table-column>
      <el-table-column label="产品价格" prop="price" width="250px" align="center">
      </el-table-column>
      <el-table-column>
         <template>
            <el-button type="info" circle icon=""></el-button>
         </template>
      </el-table-column>
     </el-table>
  </div>
</template>

<script>
export default {
 data() {
  return {
    makeupData:[],
    form:{
      name:""
    }
    }
 },
  methods: {
    onSubmit() {
      
    },
  },
  // 挂载
  mounted () {
    let params = { leixing: "di" };
    this.$http.productApi.queryByleixing(params).then((res) => {
      // 将res.data.data存入this.products;
      this.makeupData = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.input-with-select{
  width: 350px;
  margin-right: 15px;
}
</style>